<style scoped>

.extendGroup {
  float: right;
  margin-right: 20px;
  opacity: 0;
}

.el-tree-node__content:hover .extendGroup {
  opacity: 1;
}
.paramconfig .el-form{display: flex;justify-content: space-between;align-items: center;}
.form_text{width:202px;display: inline-block;}

</style>

<template>
  <div>
      <template v-if="routerPath=='paramconfig'" >
        <div v-loading="loading" class="paramconfig">
          <el-col :span="24" class="toolbar table_toolbar" style="padding-bottom: 0px;">
             <el-form :inline="true" >
              <el-form-item class="table_input">
                <el-select v-model="configType" placeholder="请选择" @change="configChange">
                  <el-option
                    v-for="item in configTypes"
                    :key="item.typeId"
                    :label="item.name"
                    :value="item.typeId">
                  </el-option>
                </el-select>
              </el-form-item>
         
              <el-form-item class="" >
                <el-button class="table_btn_r" type="primary"  @click="handleAdd">新增配置</el-button>
              </el-form-item>
          </el-form>
           
          </el-col>

         
    
        <!-- table start  -->
        <el-table :data="list" style="width: 100%">
          <el-table-column width="37">
            <template scope="scope">
              <img src="../assets/img/sysFile.gif">
            </template>
          </el-table-column> 
          <el-table-column label="ID"     type="index"    width="60">
          </el-table-column>
          <el-table-column prop="code" label="CODE" width="334">
          </el-table-column>
          <el-table-column prop="name" label="中文释义" width="200" >
          </el-table-column>
              
          <el-table-column prop="value" label="数值">
          </el-table-column>
          <el-table-column prop="remark" label="描述" width="518">
          </el-table-column>

 
          <el-table-column label="操作">
            <template slot-scope="scope">
       
              <span class="span_btn" v-if="isEdit"  @click="handleEdit(scope.$index, scope.row)" >编辑</span>
             
            </template>
          </el-table-column>
        </el-table>
          <!--工具条-->
        <!-- <el-col :span="24" class="toolbar toolbar_footer">
          <el-pagination v-if="total" background layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange" :page-size="showCount" :total="total" style="float:right;">
          </el-pagination>
        </el-col> -->
        <!-- table end  -->

         <!-- 新增页面 -->
         <el-dialog title="新增配置" top="0" :modal="false" :lock-scroll="false" class="form_part form_param" :visible.sync="addFormVisible"  :close-on-click-modal="true">
          <el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm">
              <el-form-item label="配置类型:" prop="typeId" class="form_select">
                <el-select v-model="addForm.typeId" placeholder="请选择"  >
                  <el-option
                    v-for="item in configTypes"
                    :key="item.typeId"
                    :label="item.name"
                    :value="item.typeId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="配置名称:" prop="name">
                <el-input  v-model="addForm.name" auto-complete="off"></el-input>
                
              </el-form-item>
              <el-form-item label="配置码:" prop="code">
                <el-input  v-model="addForm.code" auto-complete="off"></el-input>
                
              </el-form-item>
          
              <el-form-item label="配置值:" prop="value">
                <el-input v-model="addForm.value" auto-complete="off"></el-input>
            
              </el-switch>
              </el-form-item>    
             <!--  <el-form-item label="是否为开关:" prop="switch">
                <el-switch
                v-model="addForm.switch"
                active-color="#13ce66"
                inactive-color="#e7eaec"
                active-value="1"
                inactive-value="0"
                >
              </el-switch>
              </el-form-item>  -->              
              <el-form-item class="dialog-footer">
                  <el-button type="primary" @click.native="addSubmit('addForm')" :loading="addLoading">提交</el-button>
                  <el-button type="primary" @click.native="addFormVisible = false">取消</el-button>

              </el-form-item> 
 
          </el-form>
       
        </el-dialog>

         <!-- 编辑页面 -->
         <el-dialog title="修改配置" top="0" :modal="false" :lock-scroll="false" class="form_part form_param" :visible.sync="editFormVisible"  :close-on-click-modal="true">
          <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
              <el-form-item label="CODE:">
                <span class="form_text">{{editForm.CODE}}</span>
              </el-form-item>
              <el-form-item label="配置名称:">
                <span class="form_text">{{editForm.name}}</span>
              </el-form-item>
              <el-form-item label="配置描述:" prop="remark" class="form_switch">
                <el-input type="textarea" v-model="editForm.remark"></el-input>
              </el-form-item>
              <el-form-item label="配置值:" prop="value" class="form_switch">
                <el-input v-if="!isSwitch" v-model="editForm.value" auto-complete="off"></el-input>
                <el-switch v-if="isSwitch"
                v-model="editForm.value"
                active-color="#13ce66"
                inactive-color="#e7eaec"
                active-value="1"
                inactive-value="0"
                >
              </el-switch>
              </el-form-item>                  
              <el-form-item class="dialog-footer">
                  <el-button type="primary" @click.native="editSubmit('editForm')" :loading="editLoading">提交</el-button>
                  <el-button type="primary" @click.native="editFormVisible = false">取消</el-button>

              </el-form-item> 
 
          </el-form>
       
        </el-dialog>
      </div>
      </template>
       <template v-else>
        <router-view></router-view>
      </template>
  </div>

  
  
</template>

<script>
import * as paramconfig from '../api/paramconfig';
import isvalidPhone from '../api/valide';
import qs from 'qs';
import md5 from 'js-md5';

let myMixin = {
  data: function() {
    return { paramconfig }
  }
}
var validPhone=(rule, value,callback)=>{
      if (!value){
          callback(new Error('请输入电话号码'))
      }else  if (!isvalidPhone.isvalidPhone(value)){
        callback(new Error('请输入正确的11位手机号码'))
      }else {
          callback()
      }
  }
export default {
  mixins: [myMixin],
  data() {
    return {
      configType:'',
      configTypes:[],
      isSwitch:false,
      isDel:true,
      isEdit:true,
      isReleRole:true,
      isReleGroup:true,
      total: 10,
      page: 1,
      showCount:10,
      routerPath:'',
      addForm:{},
      addFormVisible:false,//新增页面是否显示,
      addFormRules:{
        typeId: [
            { required: true, message: '请输入描述', trigger: 'change' }
          ],
        name: [
          { required: true, message: '请输入值', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入值', trigger: 'blur' }
        ],
        
      },
      editFormVisible:false,//编辑界面是否显示
      editForm:{},//编辑页面数据

      editFormRules:{
        remark: [
            { required: true, message: '请输入描述', trigger: 'blur' }
          ],
        value: [
          { required: true, message: '请输入值', trigger: 'blur' }
        ],
        
      },
      addLoading:false,//
      editLoading:false,//
      list: [
        { userName:"test",
          userGender:1,
          loginName:"test",
          loginPass:"test",
          phoneNum:"test",
          userMail:"test",
          certNo:"test",
        },
        { userName:"test",
          userGender:1,
          loginName:"test",
          loginPass:"test",
          phoneNum:"test",
          userMail:"test",
          certNo:"test",
        }
      ],
      canReset: true,
      loading: false,
      groupId:'',//组id
      userId:'',//用户id
      editIdNoId:'',
    }
  },
  methods: {
    configChange(val){
      console.log(val)
      this.configType=val;
      this.fetchData();
    },
    handleAdd(){},
    handleCurrentChange(val) {
      this.page = val;
      // this.getparamconfig();
      this.fetchData();
    },
    //显示新增界面
    handleAdd(){
      this.addFormVisible=true;
    },
    addSubmit(){
      //新增数据提交
      this.$refs.addForm.validate((valid) => {
          if (valid) {
             let para = {
              typeId:this.addForm.typeId,
              name:this.addForm.name,
              value:this.addForm.value,
              code:this.addForm.code,
         
            };
            console.log(para)
            paramconfig.add.r(para).then((res) => {
              console.log(res)
              if(res.data.retCode==1){
                //添加配置信息成功
                this.addFormVisible = false;

                this.fetchData();
              }else{
                this.$message(res.data.retMsg);
              }
              
            });
          }else{
            console.log('error submit!!');
            return false;
          }
      })
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      console.log(row)
      this.editFormVisible = true;
      this.editIdNoId=row.idNo;
      this.editForm=row;
      this.editForm.CODE=row.code;
      if(row.valueType==2){
        this.isSwitch=true;
      }else{
        this.isSwitch=false;
      }

    },

 
    editSubmit:function(){
      //编辑数据提交
      this.$refs.editForm.validate((valid) => {
          if (valid) {
             let para = {
              idNo:this.editIdNoId,
              name:this.editForm.name,
              value:this.editForm.value,
              remark:this.editForm.remark,
         
            };
            console.log(para);
            paramconfig.modify.r(para).then((res) => {
              console.log(res)
              if(res.data.retCode==1){
                //编辑配置信息成功
                this.editFormVisible = false;

                this.fetchData();
              }else{
                this.$message(res.data.retMsg);
              }
              
            });
          }else{
            console.log('error submit!!');
            return false;
          }
      })
    },
    fetchDataConfig() {
       paramconfig.requestConfig.r().then((res) => {
        console.log(res)
        if(res.data.retCode==1){
          // this.total=res.data.data.totalRow;
          this.configTypes = res.data.data;
          this.configType=res.data.data[0].typeId;
          this.fetchData();
        }else{
          this.$message.error(res.data.retMsg);
        }
   
        this.loading = false;
      });
    },
    fetchData(init) {
      this.loading = true;
     /* if(!this.$_has([paramconfig.request])){
        this.$message("暂无权限");
        this.loading = false;

        return;
      }*/
      let para={
        typeId:this.configType,
      }
      paramconfig.request.r(para).then((res) => {
        console.log(res)
        if(res.data.retCode==1){
          this.total=res.data.data.totalRow;
          this.list = res.data.data.list;
        }else{
          this.$message.error(res.data.retMsg);
        }
   
        this.loading = false;
      });
    },
    requestNotAllowed: function(){
      paramconfig.notAllowed.r();
    }
  },
  watch: {
          // 如果路由有变化，会再次执行该方法
          "$route": function(){
            this.routerPath=this.$route.path.split("/").pop();
            // this.groupId="";
            // this.fetchData(true)

          }
  },
  created() {
   /* this.isReleRole=this.$_has([paramconfig.releRolesUser]);
    this.isReleGroup=this.$_has([paramconfig.releGroupUser]);
    this.isEdit=this.$_has([paramconfig.modify]);
    this.isDel=this.$_has([paramconfig.remove]);
    if(this.$route.query.groupId!=undefined&&this.$route.query.groupId!="undefined"&&this.$route.query.groupId!=""){
      this.groupId=this.$route.query.groupId;
    }*/

    // this.fetchData(true)
    this.fetchDataConfig();
    /*console.log(this.$route.path.split("/").pop())*/
    this.routerPath=this.$route.path.split("/").pop();
    

  }
}
</script>